<template>
  <div class="library-container">
    <!-- 顶部导航栏 -->
    <NavTop></NavTop>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">图书馆</h1>
        <p class="page-subtitle">发现知识的宝藏，享受阅读的乐趣</p>
      </div>

      <!-- 搜索栏 -->
      <div class="search-section">
        <div class="search-bar">
          <el-input
              v-model="searchQuery"
              placeholder="搜索图书名称、作者或ISBN..."
              clearable
              size="large"
              @keyup.enter="searchBooks"
              class="search-input"
          >
            <template #prefix>
              <el-icon class="search-icon"><Search /></el-icon>
            </template>
          </el-input>

          <el-select
              v-model="categoryFilter"
              placeholder="全部分类"
              clearable
              size="large"
              class="category-select"
          >
            <el-option
                v-for="category in categories"
                :key="category.id"
                :label="category.name"
                :value="category.id"
            />
          </el-select>

          <el-button
              type="primary"
              size="large"
              @click="searchBooks"
              class="search-btn"
          >
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
        </div>

        <!-- 统计信息 -->
        <div class="stats-bar">
          <div class="stat-item">
            <span class="stat-number">{{ totalBooks }}</span>
            <span class="stat-label">本图书</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ availableBooks }}</span>
            <span class="stat-label">可借阅</span>
          </div>
        </div>
      </div>

      <!-- 图书展示 -->
      <div class="books-section">
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="6" animated />
        </div>

        <div v-else-if="paginatedBooks.length === 0" class="empty-state">
          <el-empty description="暂无图书数据" />
        </div>

        <div v-else class="books-grid">
          <div
              v-for="(book, index) in paginatedBooks"
              :key="book.id"
              class="book-card"
              :style="{ animationDelay: `${index * 0.1}s` }"
              @click="showBookDetail(book)"
          >
            <div class="book-cover-wrapper">
              <el-image
                  :src="book.cover || placeholderCover"
                  fit="cover"
                  class="book-cover"
                  :lazy="true"
              >
                <template #error>
                  <div class="cover-placeholder">
                    <el-icon><Picture /></el-icon>
                    <span>暂无封面</span>
                  </div>
                </template>
              </el-image>

              <!-- 状态标签 -->
              <div class="status-badge" :class="getStatusClass(book.status)">
                {{ getStatusText(book.status) }}
              </div>

              <!-- 悬浮操作按钮 -->
              <div class="hover-actions">
                <el-button
                    type="primary"
                    size="small"
                    circle
                    @click.stop="showBookDetail(book)"
                >
                  <el-icon><View /></el-icon>
                </el-button>
                <el-button
                    type="success"
                    size="small"
                    circle
                    @click.stop="openBorrowDialog(book)"
                    :disabled="book.status !== 0 || !isLoggedIn"
                >
                  <el-icon><Plus /></el-icon>
                </el-button>
              </div>
            </div>

            <div class="book-content">
              <h3 class="book-title" :title="book.bookName">{{ book.bookName }}</h3>
              <p class="book-author">{{ book.author }}</p>
              <p class="book-isbn">ISBN: {{ book.isbn }}</p>

              <div class="book-footer">
                <el-button
                    type="primary"
                    size="small"
                    @click.stop="openBorrowDialog(book)"
                    :disabled="book.status !== 0 || !isLoggedIn"
                    class="borrow-btn"
                >
                  {{ book.status === 0 ? '借阅' : '已借出' }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-section" v-if="totalBooks > 0">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="totalBooks"
            :page-sizes="[12, 24, 48, 96]"
            layout="total, sizes, prev, pager, next, jumper"
            background
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        />
      </div>
    </main>

    <!-- 图书详情对话框 -->
    <el-dialog
        v-model="bookDetailVisible"
        :title="currentBook.bookName"
        width="800px"
        align-center
        class="book-detail-dialog"
    >
      <div class="book-detail">
        <div class="detail-cover">
          <el-image
              :src="currentBook.cover || placeholderCover"
              fit="cover"
              class="large-cover"
          >
            <template #error>
              <div class="cover-placeholder large">
                <el-icon><Picture /></el-icon>
                <span>暂无封面</span>
              </div>
            </template>
          </el-image>
        </div>

        <div class="detail-info">
          <div class="detail-header">
            <h2 class="detail-title">{{ currentBook.bookName }}</h2>
            <el-tag
                :type="getStatusTagType(currentBook.status)"
                effect="dark"
                size="large"
            >
              {{ getStatusText(currentBook.status) }}
            </el-tag>
          </div>

          <div class="detail-content">
            <div class="info-grid">
              <div class="info-item">
                <label>作者</label>
                <span>{{ currentBook.author }}</span>
              </div>
              <div class="info-item">
                <label>ISBN</label>
                <span>{{ currentBook.isbn }}</span>
              </div>
              <div class="info-item">
                <label>出版社</label>
                <span>{{ currentBook.publisher || '未知' }}</span>
              </div>
              <div class="info-item">
                <label>出版日期</label>
                <span>{{ formatDate(currentBook.publishDate) }}</span>
              </div>
              <div class="info-item">
                <label>分类</label>
                <span>{{ getCategoryName(currentBook.bookType) }}</span>
              </div>
              <div class="info-item">
                <label>库存</label>
                <span>{{ currentBook.quantity || 1 }} 本</span>
              </div>
            </div>

            <div class="description-section" v-if="currentBook.description">
              <label>简介</label>
              <div class="book-description">
                {{ currentBook.description }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="bookDetailVisible = false">关闭</el-button>
          <el-button
              type="primary"
              @click="openBorrowDialog(currentBook)"
              :disabled="currentBook.status !== 0 || !isLoggedIn"
          >
            <el-icon><Plus /></el-icon>
            借阅图书
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 借书对话框 -->
    <el-dialog
        v-model="borrowDialogVisible"
        title="借阅图书"
        width="500px"
        align-center
    >
      <el-form :model="borrowForm" label-width="100px">
        <el-form-item label="图书名称">
          <el-input v-model="borrowForm.bookName" disabled />
        </el-form-item>

        <el-form-item label="作者">
          <el-input v-model="borrowForm.author" disabled />
        </el-form-item>

        <el-form-item label="ISBN">
          <el-input v-model="borrowForm.isbn" disabled />
        </el-form-item>

        <el-form-item label="预计归还日期" required>
          <el-date-picker
              v-model="borrowForm.dueTime"
              type="date"
              placeholder="选择归还日期"
              :disabled-date="disabledDate"
              style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="借阅用途">
          <el-input
              v-model="borrowForm.purpose"
              type="textarea"
              :rows="3"
              placeholder="请说明借阅用途（选填）"
              maxlength="200"
              show-word-limit
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="borrowDialogVisible = false">取消</el-button>
          <el-button
              type="primary"
              @click="submitBorrowForm"
              :loading="submitLoading"
          >
            确认借阅
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import {
  Search, Picture, View, Plus
} from '@element-plus/icons-vue'
import { getBooks} from '@/api/book'
import {  BorrowBook  } from '@/api/borrow'
import { ElMessage } from "element-plus"
import NavTop from "@/components/NavTop.vue"

// 用户状态
const isLoggedIn = ref(true) // 临时设置为true，实际应该从store获取

// 图书数据
const books = ref([])
const loading = ref(false)
const searchQuery = ref('')
const categoryFilter = ref('')
const currentPage = ref(1)
const pageSize = ref(12)

// 对话框控制
const bookDetailVisible = ref(false)
const borrowDialogVisible = ref(false)
const submitLoading = ref(false)
const userId = ref(0)
const storeduserId = sessionStorage.getItem('userId');
userId.value = storeduserId || ''


const currentBook = ref({
  id: null,
  bookNo: '',
  bookName: '',
  bookType: '',
  author: '',
  description: '',
  publisher: '',
  publishDate: null,
  cover: '',
  status: 0,
  isbn: '',
  quantity: 1
})

// 借书表单
const borrowForm = ref({
  id: null,
  bookName: '',
  author: '',
  isbn: '',
  dueTime: null,
  purpose: ''
})

// 分类数据
const categories = ref([
  { id: 1, name: '计算机科学' },
  { id: 2, name: '文学小说' },
  { id: 3, name: '历史传记' },
  { id: 4, name: '经济管理' },
  { id: 5, name: '自然科学' }
])

const placeholderCover = 'https://via.placeholder.com/240x320/e2e8f0/64748b?text=暂无封面'

// 计算属性
const filteredBooks = computed(() => {
  return books.value.filter(book => {
    const search = searchQuery.value.toLowerCase()
    const matchesSearch = !search ||
        book.bookName.toLowerCase().includes(search) ||
        book.author.toLowerCase().includes(search) ||
        book.isbn.includes(search)

    const matchesCategory = !categoryFilter.value || book.bookType === categoryFilter.value

    return matchesSearch && matchesCategory
  })
})

const totalBooks = computed(() => filteredBooks.value.length)

const availableBooks = computed(() => {
  return filteredBooks.value.filter(book => book.status === 0).length
})




const paginatedBooks = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredBooks.value.slice(start, end)
})

// 工具方法
const getStatusClass = (status) => {
  return {
    available: status === 0,
    borrowed: status === 1,
    maintenance: status === 2
  }
}

const getStatusText = (status) => {
  const statusMap = {
    0: '在库',
    1: '已借出',
    2: '维修中'
  }
  return statusMap[status] || '未知状态'
}

const getStatusTagType = (status) => {
  switch (status) {
    case 0: return 'success'
    case 1: return 'danger'
    case 2: return 'warning'
    default: return 'info'
  }
}

const getCategoryName = (categoryId) => {
  const category = categories.value.find(c => c.id === categoryId)
  return category ? category.name : '未分类'
}

const formatDate = (date) => {
  if (!date) return '未知'
  return new Date(date).toLocaleDateString('zh-CN')
}

// 禁用日期（不能选择今天之前的日期）
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
}

// 方法
const fetchBooks = async () => {
  try {
    loading.value = true
    const response = await getBooks()
    books.value = response
    console.log(books.value)
  } catch (error) {
    console.error('获取图书列表失败:', error)
    ElMessage.error('获取图书列表失败')
  } finally {
    loading.value = false
  }
}

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1
}

const handlePageChange = (newPage) => {
  currentPage.value = newPage
}

const searchBooks = () => {
  currentPage.value = 1
  fetchBooks()
}

const showBookDetail = (book) => {
  currentBook.value = { ...book }
  bookDetailVisible.value = true
}

// 打开借书对话框
const openBorrowDialog = (book) => {
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录')
    return
  }

  if (book.status !== 0) {
    ElMessage.warning('该图书当前不可借阅')
    return
  }

  // 填充借书表单
  borrowForm.value = {
    id: book.id,
    bookName: book.bookName,
    author: book.author,
    isbn: book.isbn,
    dueTime: null,
    purpose: ''
  }

  borrowDialogVisible.value = true
  // 如果是从详情页打开的，关闭详情对话框
  bookDetailVisible.value = false
}

// 提交借书表单
const submitBorrowForm = async () => {
  if (!borrowForm.value.dueTime) {
    ElMessage.warning('请选择预计归还日期')
    return
  }

  try {
    submitLoading.value = true

    // 构造提交数据
    const submitData = {
      userId: userId.value,
      borrowTime: new Date(),
      bookId: borrowForm.value.id,
      dueTime: borrowForm.value.dueTime,
      purpose: borrowForm.value.purpose
    }


    // 调用借书API
    await BorrowBook(submitData)

    ElMessage.success(`成功借阅《${borrowForm.value.bookName}》`)

    // 更新图书状态
    const bookIndex = books.value.findIndex(book => book.id === borrowForm.value.id)
    if (bookIndex !== -1) {
      books.value[bookIndex].status = 1
    }

    // 关闭对话框
    borrowDialogVisible.value = false

    // 重置表单
    resetBorrowForm()

  } catch (error) {
    console.error('借阅失败:', error)
    ElMessage.error(error.response?.data?.message || '借阅失败')
  } finally {
    submitLoading.value = false
  }
}

// 重置借书表单
const resetBorrowForm = () => {
  borrowForm.value = {
    id: null,
    bookName: '',
    author: '',
    isbn: '',
    dueTime: null,
    purpose: ''
  }
}

onMounted(() => {
  fetchBooks()
})
</script>

<style scoped>
/* CSS 变量定义 */
.library-container {
  --primary-color: #667eea;
  --primary-light: #764ba2;
  --secondary-color: #f093fb;
  --success-color: #4facfe;
  --danger-color: #ff6b6b;
  --warning-color: #feca57;
  --info-color: #48dbfb;
  --text-primary: #2c3e50;
  --text-secondary: #5a6c7d;
  --text-light: #8b9dc3;
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --border-color: #e2e8f0;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* 基础样式 */
.library-container {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg-primary) 0%, #e3f2fd 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 主内容区域 */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面头部 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0;
}

.page-title {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 16px 0;
  letter-spacing: -0.5px;
}

.page-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 400;
}

/* 搜索区域 */
.search-section {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 40px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

.search-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.search-input {
  flex: 1;
}

.search-input :deep(.el-input__wrapper) {
  height: 48px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  transition: all 0.3s ease;
  box-shadow: none;
}

.search-input :deep(.el-input__wrapper:hover) {
  border-color: var(--primary-color);
}

.search-input :deep(.el-input__wrapper.is-focus) {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-icon {
  color: var(--text-light);
}

.category-select {
  width: 200px;
}

.category-select :deep(.el-input__wrapper) {
  height: 48px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
}

.search-btn {
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  border: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 统计栏 */
.stats-bar {
  display: flex;
  gap: 32px;
  justify-content: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 图书区域 */
.books-section {
  margin-bottom: 40px;
}

.loading-container,
.empty-state {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* 图书卡片 */
.book-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s ease;
  cursor: pointer;
  border: 1px solid var(--border-color);
  animation: slideUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

.book-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color);
}

/* 封面容器 */
.book-cover-wrapper {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.book-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.book-card:hover .book-cover {
  transform: scale(1.05);
}

.cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color: var(--text-light);
  font-size: 0.9rem;
}

.cover-placeholder.large {
  font-size: 1.1rem;
}

.cover-placeholder .el-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

/* 状态标签 */
.status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  backdrop-filter: blur(10px);
}

.status-badge.available {
  background: rgba(79, 172, 254, 0.9);
}

.status-badge.borrowed {
  background: rgba(255, 107, 107, 0.9);
}

.status-badge.maintenance {
  background: rgba(254, 202, 87, 0.9);
}

/* 悬浮操作按钮 */
.hover-actions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: all 0.3s ease;
}

.book-card:hover .hover-actions {
  opacity: 1;
}

.hover-actions .el-button {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  box-shadow: var(--shadow-md);
}

/* 图书内容 */
.book-content {
  padding: 24px;
}

.book-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-author {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 4px 0;
  font-weight: 500;
}

.book-isbn {
  color: var(--text-light);
  font-size: 0.8rem;
  margin: 0 0 16px 0;
}

.book-footer {
  margin-top: auto;
}

.borrow-btn {
  width: 100%;
  height: 36px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: all 0.3s ease;
}

.borrow-btn:not(:disabled):hover {
  transform: translateY(-2px);
}

/* 分页区域 */
.pagination-section {
  display: flex;
  justify-content: center;
  background: var(--bg-secondary);
  padding: 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.pagination-section :deep(.el-pagination) {
  --el-pagination-bg-color: transparent;
}

.pagination-section :deep(.el-pagination .btn-next),
.pagination-section :deep(.el-pagination .btn-prev),
.pagination-section :deep(.el-pagination .el-pager li) {
  border-radius: var(--radius-sm);
  margin: 0 4px;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.pagination-section :deep(.el-pagination .el-pager li:hover),
.pagination-section :deep(.el-pagination .btn-next:hover),
.pagination-section :deep(.el-pagination .btn-prev:hover) {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.pagination-section :deep(.el-pagination .el-pager li.is-active) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

/* 详情对话框 */
.book-detail-dialog :deep(.el-dialog) {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.book-detail {
  display: flex;
  gap: 32px;
  min-height: 400px;
}

.detail-cover {
  flex: 0 0 240px;
}

.large-cover {
  width: 240px;
  height: 340px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.detail-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.detail-content {
  flex: 1;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.info-item span {
  font-size: 1rem;
  color: var(--text-primary);
}

.description-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.description-section label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.book-description {
  background: var(--bg-primary);
  padding: 16px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--primary-color);
  line-height: 1.6;
  color: var(--text-primary);
}

.dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.dialog-footer .el-button {
  border-radius: var(--radius-sm);
  padding: 8px 20px;
  font-weight: 600;
}

/* 动画 */
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .books-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }

  .page-title {
    font-size: 2rem;
  }

  .page-subtitle {
    font-size: 1rem;
  }

  .search-section {
    padding: 24px;
  }

  .search-bar {
    flex-direction: column;
    gap: 12px;
  }

  .category-select,
  .search-btn {
    width: 100%;
  }

  .stats-bar {
    gap: 24px;
  }

  .books-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }

  .book-detail {
    flex-direction: column;
    gap: 24px;
  }

  .detail-cover {
    flex: none;
    align-self: center;
  }

  .large-cover {
    width: 200px;
    height: 280px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .detail-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 20px 0;
    margin-bottom: 24px;
  }

  .page-title {
    font-size: 1.8rem;
  }

  .search-section,
  .loading-container,
  .empty-state,
  .pagination-section {
    padding: 20px;
    margin-bottom: 24px;
  }

  .books-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .book-cover-wrapper {
    height: 240px;
  }

  .book-content {
    padding: 20px;
  }

  .book-detail {
    gap: 20px;
  }

  .large-cover {
    width: 180px;
    height: 240px;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.8rem;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .library-container {
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-light: #94a3b8;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --border-color: #334155;
  }

  .library-container {
    background: linear-gradient(135deg, var(--bg-primary) 0%, #1e1b4b 100%);
  }

  .cover-placeholder {
    background: linear-gradient(135deg, #374151, #4b5563);
  }

  .book-description {
    background: rgba(15, 23, 42, 0.5);
  }
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--text-light);
  border-radius: 4px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* 加载动画增强 */
.loading-container :deep(.el-skeleton__item) {
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 焦点可访问性 */
.book-card:focus,
.search-btn:focus,
.borrow-btn:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* 打印样式 */
@media print {
  .search-section,
  .pagination-section,
  .book-actions,
  .hover-actions {
    display: none;
  }

  .books-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .book-card {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }
}
</style>